<template>
  <div class="my-register">
    <van-nav-bar
      title="注册"
      fixed
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
      right-text="登录"
      @click-right="onClickRight"
    />
    <div>
      <van-form @submit="onSubmit" error-message-align="right">
        <van-field name="avatar" label="头像上传">
          <template #input>
            <van-uploader v-model="avatar" :max-count="1" />
          </template>
        </van-field>
        <van-field
          v-model="uname"
          name="uname"
          label="用户名"
          placeholder="请输入用户名"
          required
          :rules="[
            { required: true, message: '用户名不能为空' },
            {
              pattern: /^\w{6,15}$/,
              message: '用户名由任意4-16位字母,数字,汉字,下划线组合',
            },
          ]"
        />
        <van-field
          v-model="user_name"
          name="user_name"
          label="昵称"
          placeholder="请输入昵称"
          required
          :rules="[{ required: true, message: '昵称不能为空' }]"
        />
        <van-field
          v-model="upwd"
          type="password"
          name="upwd"
          label="密码"
          placeholder="请输入密码"
          required
          :rules="[
            { required: true, message: '密码不能为空' },
            { pattern: /^\d{6}$/, message: '密码由6位数字组成' },
          ]"
        />
        <van-field
          v-model="re_upwd"
          type="password"
          name="re_upwd"
          label="确认密码"
          placeholder="请再次输入密码"
          required
          :rules="[
            { required: true, message: '确认密码不能为空' },
            { validator, message: '两次密码输入不一致' },
          ]"
        />
        <van-field
          v-model="email"
          name="email"
          label="电子邮箱"
          placeholder="请输入电子邮箱"
          required
          :rules="[
            { required: true, message: '请输入电子邮箱' },
            {
              pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
              message: '电子邮箱格式错误！',
            },
          ]"
        />
        <van-field
          v-model="phone"
          type="tel"
          required
          name="phone"
          label="手机号"
          maxlength="11"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '手机号不能为空' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
          ]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交注册信息</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      avatar: [{ url: "https://img01.yzcdn.cn/vant/cat.jpeg" }],
      uname: "",
      user_name: "",
      upwd: "",
      re_upwd: "",
      email: "",
      phone: "",
    };
  },
  methods: {
    onSubmit(e) {
      const { avatar, uname, user_name, upwd, re_upwd, email, phone } = this;
      const url = "http://127.0.0.1:5050/users/register";
      const params = `uname=${uname}&user_name=${user_name}&upwd=${upwd}&email=${email}&phone=${phone}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          Toast.success("注册成功！");
          this.$notify({
            type: "success",
            message: "注册成功,3s后返回登录",
            duration: 3000,
          });
          setTimeout(() => {
            this.$router.push("/login");
          }, 3000);
        } else if (res.data.code == 501) {
          Toast("该用户已存在,请重新注册");
        } else {
          Toast("注册失败" + res.data.msg);
        }
      });
    },
    validator(val) {
      return val == this.upwd;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-register {
  background-image: url("/public/img/user/login-bg.png");
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  .van-nav-bar {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 47%;
  }
  > div {
    transform: translateX(-47vw);
    width: 94vw;
    position: absolute;
    top: 25vw;
    left: 50vw;
    .van-form {
      background-color: rgba(0, 0, 0, 0.1);
      padding: 30px 20px;
    }
  }
}
</style>
